<template>
  <div class="production-container">
    <production-search-form :type="searchCondition.type" v-on:update:search="searchChangeHandler"/>
    <div class="production-content">
      <div class="button-box clearfix">
        <el-button type="primary" icon="el-icon-plus" @click="goToAddProduct"> {{ $t('production.addProduction') }} </el-button>
      </div>
      <production-table :table-data="tableData" :total="total" :is-bank-product="isBankProduct" :listLoading="isListLoading" v-on:update:search="searchChangeHandler"></production-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { default as ProductionSearchForm } from "./productionSearchForm/index";
import { default as productionTable } from "./productionTable/index";

export default {
  name: "ProductionManagement",
  components: {
    ProductionSearchForm,
    productionTable
  },
  data() {
    return {
      tableData: [],
      total: 0,
      // 搜索条件
      searchCondition: {
        page: 1,
        limit: 10,
        type: 'bank',   // 默认搜索银行产品
      },
      // 产品列表是否加载中的标志位
      isListLoading: false,
      // 是否在搜索银行产品
      isBankProduct: true
    };
  },
  created() {
    this.getProductList()
  },
  computed: {},
  methods: {
    searchChangeHandler: function(search) {
      // search 是子组件传来的值
      console.log("searchChangeHandler, search = ", search);
      this.searchCondition = Object.assign(this.searchCondition, search);
      console.log("searchCondition = ", this.searchCondition);

      this.isBankProduct = this.searchCondition.type === 'bank'

      this.getProductList()
    },
    /**
     * 获取产品列表
     */
    getProductList() {
      this.isListLoading = true
      this.getProductListByType().then(data => {
        this.productionListProcess(data)
        this.isListLoading = false
      }).catch(error => {
        console.error('get product list has error:', error)
        this.isListLoading = false
      })
    },
    /**
     * 调用api, 查询
     */
    getProductListByType: function() {
      if (this.searchCondition.type === 'bank') {
        return this.$store.dispatch('getBankProductList', { })
      }
      return this.$store.dispatch('getFastProductList', { })
    },
    // 根据条件查询产品列表
    productionListProcess: function(data) {
      if (data['code'] === 0) {
        this.tableData = data['data']['data']
        this.total = data["data"]["total"] || 0
      }
    },
    // 跳转到添加产品组件
    goToAddProduct() {
      this.$router.push({ path: 'addProduct' })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "@/styles/variables.scss";
@import "@/styles/mixin.scss";
.production {
  &-container {
    margin: 30px;
  }
  &-content {
    max-width: 90%;
    margin: 10px auto;
    border-top: 1px solid #ccc;
    padding-top: 10px;
    .button-box {
      button {
        float: right;
        // background-color: $themeColor;
        // border-color: $themeColor;
      }
    }
  }
}
</style>
